//视频详情

//生活圈视频详情布局
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:readmore/readmore.dart';
import 'package:video_player/video_player.dart';


class LifeCircleDetaipVedioMainRoute extends StatefulWidget{


   LifeCircleDetaipVedioMainRoute(this.url,this.thumbnailUrl,{Key? key}) : super(key: key);
  //视频播放地址
  String url;
  String thumbnailUrl;

  @override
  LifeCircleVedioState createState() => LifeCircleVedioState();
}

class LifeCircleVedioState extends State<LifeCircleDetaipVedioMainRoute>{
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      title: "生活圈视频详情",
      home: Scaffold(
        body: SafeArea(
            child: LifeCircleVedioDetailWidget(widget.url,widget.thumbnailUrl)),
      )
      ,
    );
  }
}

class  LifeCircleVedioDetailWidget extends StatefulWidget{

   LifeCircleVedioDetailWidget(this.url,this.thumbnailUrl,{Key? key}) : super(key: key);

  String? url;
  String? thumbnailUrl;

  @override
  LifeCircleVedioDetailState createState() =>LifeCircleVedioDetailState();

}

class LifeCircleVedioDetailState extends State<LifeCircleVedioDetailWidget>{

  double videlHeight=0;

  //记录时候是第一次确定底部信息大小，用来确定视频播放器高度
  bool isFirstBuild =true;

  late VideoPlayerController _controller;


  @override
  void initState() {    //重写组件初始化方法
    super.initState();

      String? url = widget.url;
     if(null != url){
      _controller=VideoPlayerController.network(url)..initialize().then((a){
        setState(() {
          _controller.play();

        });
      });
    }

  }


  @override
  Widget build(BuildContext context) {

    return ConstrainedBox(
         constraints: BoxConstraints.expand(),
       child: Stack(
        children: [
           //视频播放器
           // Image(image:NetworkImage("https://img0.baidu.com/it/u=3365573645,2073973856&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"),fit:BoxFit.fitHeight,height: videlHeight,),
            SizedBox(
              height: videlHeight,
              width: MediaQuery.of(context).size.width,
              child: _controller.value.isInitialized ? AspectRatio(   //这里和上面是联动的，下面详细讲
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              ):
           FadeInImage(width: MediaQuery.of(context).size.width,height: videlHeight,fit:BoxFit.fill ,placeholder:const AssetImage("assets/images/icon_placeholder.gif"),
        image: NetworkImage(widget.thumbnailUrl??""),
        imageErrorBuilder : (context, error, stackTrace) {
          return Container(
            child: Image.asset("assets/images/icon_error.png",fit: BoxFit.fill,),
            height: 150,
            color: Colors.grey,
          );
        }
    ),





            ),

          LifeCircleVedioInfoWidget(onPageChanged: onChange),
        //title
         Padding(padding: const EdgeInsets.only(left: 10,right: 10,top: 10),child: Row(
            mainAxisSize: MainAxisSize.min,
          children: const [Image(image: AssetImage("assets/images/icon_back.png"),width: 20,height: 20,),
          Spacer(),
          Image(image: AssetImage("assets/images/icon_more.png"),width: 20,height: 20,),
        ],)
       ,),
      ],
       )
     );
  }


//  获取底部info高度，然后计算计算视频播放器高度
   void onChange(double height){

    setState(() {
      if(isFirstBuild){
        videlHeight = MediaQuery.of(context).size.height -height;
        isFirstBuild = false;
      }
    });
   }

}

//底部信息Widget
class LifeCircleVedioInfoWidget extends StatefulWidget{

   final ValueChanged<double>? onPageChanged;

  const LifeCircleVedioInfoWidget({required this.onPageChanged, Key? key}) : super(key: key);

  @override
  LifeCircleVedioInfoState createState() =>LifeCircleVedioInfoState();}

class LifeCircleVedioInfoState extends State<LifeCircleVedioInfoWidget>{

  GlobalKey _listKey = new GlobalKey();
  bool isFirstBuild =true;
  double containerHeight =0;
  late Color parentContainerColor = Colors.transparent;


  @override
  Widget build(BuildContext context) {
    // 监听widget渲染完成
    WidgetsBinding.instance!.addPostFrameCallback((duration){
      if(isFirstBuild){
        var height  = _listKey.currentContext!.size!.height;
        widget.onPageChanged!(height);
         setState(() {
          containerHeight =height;
        });
        isFirstBuild=false;
      }
    });
    return Container(color:Colors.transparent,child: Stack(
      children: [
        Align(child: Container(color: Colors.black,height: containerHeight,),alignment: Alignment.bottomLeft,),
        Container(color:parentContainerColor,child:Align(alignment:Alignment.bottomLeft,child:
        Padding(
          key: _listKey,
          padding: EdgeInsets.all(10),child: Column(
          mainAxisSize :MainAxisSize.min,
          children: [
            Padding(padding: const EdgeInsets.only(top: 10,bottom: 10),child:Row(children: [Row(children: const [SizedBox(
              child: CircleAvatar(
                backgroundImage: NetworkImage("https://img0.baidu.com/it/u=3365573645,2073973856&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"),
              ),
              width: 20,
              height: 20,
            ),
              Padding(padding: EdgeInsets.only(left: 7),child: Text("好友昵称",style: TextStyle(fontSize: 12,color: Colors.white),),)
            ],),
              Spacer(),
              DecoratedBox(decoration: BoxDecoration(
                border:  Border.all(color: Colors.red, width: 0.5), // 边色与边宽度
                color:Colors.white, // 底色
                borderRadius:BorderRadius.circular((20.0)),),// 也可控件一边圆角大小
                child:const Padding(padding: EdgeInsets.only(top:3,bottom: 3,left: 7,right: 7),child: Text("已关注",style: TextStyle(fontSize: 10,color: Colors.red),),) ,
              )
            ],
            )
              ,),
            //视频加载动画

            ReadMoreText(
              'Flutter is Google’s mobile UI open source framework to build high-quality native (super fast) interfaces for iOS and Android apps with the unified codebase.Flutter is Google’s mobile UI open source framework to build high-quality native (super fast) interfaces for iOS and Android apps with the unified codebase.',
              trimLines: 2,
              colorClickableText: Colors.pink,
              style: const TextStyle(color: Colors.white),
              trimMode: TrimMode.Line,
              trimCollapsedText: '展开更多',
              trimExpandedText: '收起',
              moreStyle: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
              callback: (bool val){
                setState(() {
                  if(val){
                    parentContainerColor = Colors.transparent;
                  }else{
                    parentContainerColor = const Color(0x99000000);
                  }
                });
              },
            ),
            Container(
                padding: const EdgeInsets.only(top: 20,bottom: 20),
                child:Row(
                  mainAxisAlignment : MainAxisAlignment.spaceBetween,
                  children:  [
                    DecoratedBox(decoration: BoxDecoration(
                      border:  Border.all(color: Colors.red, width: 0.5), // 边色与边宽度
                      color:Colors.white, // 底色
                      borderRadius:BorderRadius.circular((20.0)),),// 也可控件一边圆角大小
                      child:const Padding(padding: EdgeInsets.only(top:3,bottom: 3,left: 7,right: 7),child: Text("Ta提到的商品",style: TextStyle(fontSize: 10,color: Colors.red),),) ,
                    ),
                    Row(children:[Padding(padding: const EdgeInsets.only(right: 20),child: Row(children: const [Image(image: AssetImage("assets/images/icon_go.png"),width: 10,height: 10,),Padding(padding: EdgeInsets.only(left: 5),child: Text("点赞",style: TextStyle(fontSize: 12,color: Colors.white),),),],),),
                      Padding(padding: const EdgeInsets.only(right: 20),child: Row(children: const [Image(image: AssetImage("assets/images/icon_go.png"),width: 10,height: 10,), Padding(padding: EdgeInsets.only(left: 5),child: Text("收藏",style: TextStyle(fontSize: 12,color: Colors.white),),)],),)
                      ,Row(children: const [Image(image: AssetImage("assets/images/icon_go.png"),width: 10,height: 10,),Padding(padding: EdgeInsets.only(left: 5),child: Text("评论",style: TextStyle(fontSize: 12,color: Colors.white),),)],)],)
                  ],)
            ),
          ],),)
        ) ,),
      ],
    ),
    );
  }
}









